
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"><link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* css 代码  */
    </style>
    <script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts/modules/oldie.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="/layui-v2.5.5/layui/css/layui.css"  media="all">
    <script src="/layui-v2.5.5/layui/layui.js" charset="utf-8"></script>
</head>
<body>

<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">年月选择器</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="test1" placeholder="yyyy-MM">
        </div>
        <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" id="search">立即提交</button>
    </div>

</div>



<div id="container" style="min-width:400px;height:400px"></div>

<script>
    // JS 代码
    $(document).ready(function () {
        list();
    })
    function list() {
        var dates=$("#test1").val();
        console.log(dates);
        $.ajax({
            url: 'get_month_data',
            data:{'date':dates},
            type:'GET',
            success: function (res) {
                console.log(res);
                var res = JSON.parse(res);
                //var type=typeof (res['totalprice']);
                //console.log(type);
                var str = "";
                //var totalprice=JSON.stringify(res['totalprice']);
                for (var i = 0; i < res['totalprice'].length; i++) {
                    str += res['totalprice'][i] + ','
                }
                str = '[' + str.substr(str, str.length - 1) + ']';
                console.log(str);
                var chart = Highcharts.chart('container', {

                    chart: {
                        type: 'line'
                    },
                    title: {
                        text: '当月销售额'
                    },
                    subtitle: {
                        text: '数据来源: WorldClimate.com'
                    },
                    xAxis: {
                        categories: res['hour']
                    },
                    yAxis: {
                        title: {
                            text: '单位 (万元)'
                        }
                    },
                    plotOptions: {
                        line: {
                            dataLabels: {
                                // 开启数据标签
                                enabled: true
                            },
                            // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                            enableMouseTracking: true
                        }
                    },
                    series: [{
                        name: res.time,
                        data: eval(str)
                    }]
                });
            }
        });
    };
</script>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        //年月选择器
        laydate.render({
            elem: '#test1'
            ,type: 'month'
        });
    });
    $("#search").click(function(){

        list();

    })
</script>

</body>
</html>